<%--
  Created by IntelliJ IDEA.
  User: JIAHANG
  Date: 2023/1/31
  Time: 16:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>导航栏</title>
  <link rel="stylesheet" href="css/product.css" />
</head>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淘宝导航</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      font-weight: 520;
      font-family: 微软雅黑;
    }

    #nav {
      width: 1470px;
      height: 72px;
      background-color: rgb(247, 249, 250);
      border-radius: 20px;
      margin: 0px auto;
      position: fixed;
    }

    #nav>ul>li {
      float: left;
      width: 175.75px;
      height: 72px;
      text-align: center;
    }

    #nav>ul>li>a {
      text-align: center;
      line-height: 72px;
      font-size: 20px;
      color: black;
    }

    #nav>ul>li>a:hover {
      color: orange;
    }

    ul>span {
      float: left;
      line-height: 72px;
      color: rgb(225, 224, 224);
      font-weight: 800;
      font-size: 24px;
    }

    #nav>ul>li>.a1 {
      color: #FF0036;
    }

    #nav>ul>li>.a2 {
      color: rgb(101, 198, 58);
    }
  </style>
</head>

<body>
<div id="nav">
  <ul>
    <li><a href="/untitled01_war_exploded/JSP/Product.jsp" class="a1">天猫</a></li><span>|</span>
    <li><a href="#" class="a1">聚划算</a></li><span>|</span>
    <li><a href="#" class="a2">天猫超市</a></li><span>|</span>
    <li><a href="#">司法拍卖</a></li><span>|</span>
    <li><a href="#">飞猪旅行</a></li><span>|</span>
    <li><a href="#">天天特卖</a></li><span>|</span>
    <li><a href="#">极有家</a></li><span>|</span>
    <li><a href="#">淘宝直播</a></li>
  </ul>
</div>
</body>
</html>
<%--<li><a href="/untitled01_war_exploded/JSP/Product.jsp" class="a1">天猫</a></li><span>|</span>--%>